<template>
	<view class="wrap" :class="(is_show_emoji?'openEmoji':''+ '')+(is_show_file?' openFile':'')">
		<text class="start"></text>
		<div class="msg_list flex-column">
			<block v-for="item,index in msg_list" :key="index">
				<block class="" v-if="item.infotype == 'order'">
					<view class="card-plan">
						<view class="card-plan-head">
							<view class="">{{item.content.statustitle}}</view>
							<image v-if="item.content.status == 12" src="../../../static/images/icon/finish.png"
								mode=""></image>
							<image v-else-if="item.content.status == 6" src="../../../static/images/icon/refuse.png"
								mode=""></image>
							<image v-else-if="item.content.status == 1" src="../../../static/images/icon/succeed.png"
								mode=""></image>
							<image v-else-if="item.content.status == 5" src="../../../static/images/icon/wallet.png"
								mode=""></image>
							<image v-else src="../../../static/images/icon/await.png" mode=""></image>
						</view>
						<view class="card-plan-center">
							<view class="flex align-center just-between">
								<view class="flex align-center">
									<img class="image22-bora m-r-5" :src="$imgUrl + item.content.iconimg" alt=""
										:aria-label="item.content.title" />
									<view class="title_box">{{item.content.title}}</view>
								</view>
								<view class="flex align-center" @click="finddetail(item.content)">
									<view class="m-r-5">查看详情</view>
									<img class="image-right" src="../../../static/images/icon/right.png" alt=""
										aria-label="查看详情" />
								</view>
							</view>
							<view class="flex align-center just-between m-t-10">
								<view class="">叫醒时间</view>
								<view class="">{{item.content.date}}</view>
							</view>
							<view class="flex align-center just-between m-t-10">
								<view class="">叫醒周期</view>
								<view class="">
									{{item.content.kaishidate}}{{item.content.jieshudate ? '~' + item.content.jieshudate : ''}}
								</view>
							</view>
							<view class="flex align-center just-between m-t-10">
								<view class="">{{priceFinsh(item.content.status)}}</view>
								<view class="">￥{{item.content.payment}}</view>
							</view>
						</view>
						<!-- 修改计划 -->
						<view class="flex align-center just-between p-0-10 m-b-10"
							v-if="(item.content.waker_worker_user_id == userInfo.id) && item.content.status == 2 && item.content.needshenpi">
							<view class="btn-item btn-l" @click="jujuebtn(item)">拒绝</view>
							<view class="btn-item btn-r" @click="tongyibtn(item.content)">同意</view>
						</view>
						<!-- 退款处理 -->
						<view class="flex align-center just-between p-0-10 m-b-10"
							v-if="(item.content.waker_worker_user_id == userInfo.id) && item.content.status == 4 && item.content.needshenpi">
							<view class="btn-item btn-l" @click="trueDownRefund(item)">拒绝</view>
							<view class="btn-item btn-r" @click="agreeRefund(item.content)">同意</view>
						</view>
					</view>
				</block>
				<block class="" v-else>
					<view v-if="item.fromuid!=userInfo.id" class="item flex-row align-start just-start">
						<image :src='$imgUrl+page_url_data.avatar'></image>
						<!-- 文字 -->
						<block v-if="item.infotype=='txt'">
							<text class="text_val" selectable>{{item.content}}</text>
						</block>
						<!-- 语音 -->
						<block v-else-if="item.infotype=='mp3'">
							<div @click="handleAudioPlay(item.content)" class="audio flex-row align-center audio-left"
								:style="'min-width:'+(36+item.infoshichang*50)+'rpx'">
								<image mode="widthFix" style="transform: rotate(180deg);"
									src='../../../static/images/icon/chat-audio.png'>
								</image>
								<text>{{item.infoshichang}}"</text>
							</div>
						</block>
						<!-- 图片 -->
						<block v-else-if="item.infotype=='img'">
							<div class="img">
								<image mode="aspectFill" @click="preViewImage($imgUrl+item.content)"
									:src='$imgUrl+item.content'>
								</image>
							</div>
						</block>
						<!-- 视频 -->
						<block v-else-if="item.infotype=='video'">
							<div class="video">
								<!-- #ifdef APP-PLUS -->
								<sanqi-video :poster="$imgUrl+item.videoimage" :src='$imgUrl+item.content'
									borderRadius="5px"></sanqi-video>
								<!-- #endif -->
								<!-- #ifdef H5 -->
								<video :poster="$imgUrl+item.videoimage" :src='$imgUrl+item.content'></video>
								<!-- #endif -->
							</div>
						</block>
					</view>
					<view v-else class="item flex-row align-start just-end">
						<!-- 文字 -->
						<block v-if="item.infotype=='txt'">
							<text class="text_val" selectable>{{item.content}}</text>
						</block>
						<!-- 语音 -->
						<block v-if="item.infotype=='mp3'">
							<div @click="handleAudioPlay(item.content)" class="audio flex-row align-center audio-right"
								:style="'min-width:'+(36+item.infoshichang*50)+'rpx'">
								<image mode="widthFix" src='../../../static/images/icon/chat-audio.png'></image>		
								<text>{{item.infoshichang}}"</text>
							</div>
						</block>
						<!-- 图片 -->
						<block v-else-if="item.infotype=='img'">
							<div class="img">
								<image mode="aspectFill" @click="preViewImage(item.content)" :src='item.content'></image>
							</div>
						</block>
            <!-- 文件 -->
						<block v-else-if="item.infotype=='file'">
							<div class="jl-file">
								<view class="jl-title">
                  <img src="../../../static/images/icon/file-wenjian.png" alt="">
                  <view>xxx的简历</view>
                </view>
                <view class="jl-btn">点击预览附件简历</view>
							</div>
						</block>
						<!-- 视频 -->
						<block v-else-if="item.infotype=='video'">
							<div class="video">
								<!-- #ifdef APP-PLUS -->
								<sanqi-video :poster="$imgUrl+item.videoimage" :src='$imgUrl+item.content'
									borderRadius="5px"></sanqi-video>
								<!-- #endif -->
								<!-- #ifdef H5 -->
								<video :poster="$imgUrl+item.videoimage" :src='$imgUrl+item.content'></video>
								<!-- #endif -->
							</div>
						</block>
						<image :src="$imgUrl+userInfo.avatar"></image>
					</view>
				</block>
			</block>
		</div>
		<text class="end"></text>
		<chatInputVue @emoji="emoji" @file="files" ref="chatAsrVue" @post="handleSend"></chatInputVue>

		<!-- 弹框变更 -->
		<!-- <uni-popup ref="showmodal" :is-mask-click="false" v-if="false">
			<u-show-modal text="确定同意变更吗？" @oncancel="handlecancel" @onverify="handleverify"></u-show-modal>
		</uni-popup> -->
		<!-- 弹框退款 -->
		<!-- <uni-popup ref="showmodalrefund" :is-mask-click="false" v-if="false">
			<u-show-modal text="确定同意退款吗？" @oncancel="handlerefundcancel" @onverify="handlerefundverify"></u-show-modal>
		</uni-popup> -->
	</view>
</template>

<script>
	import utils from '../../../common/utils'
	import chatInputVue from '../../../components/chat-input.vue'
	// import uShowModal from '../../../components/u/u-show-modal/u-show-modal.vue';
  import {chatGetmyprivatexinxi} from '../../../utils/userApi'
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		components: {
			chatInputVue
			// uShowModal
		},
		data() {
			return {
				page_url_data: {},
				page: 1,
				msg_list: [],
				joinTime: (new Date().getTime() / 100).toFixed(0),
				is_show_emoji: false,
				is_show_file: false,
				conter: null,
				initPgae: 0,
			}
		},
		computed: {
			userInfo() {
				return uni.getStorageSync('userInfo')
			},
		},
		async onLoad(option) {
			const self = this
			this.page_url_data = JSON.parse(option.option)
			uni.setNavigationBarTitle({
				title: this.page_url_data.name
			});
			this.$nextTick(() => {
				this.$refs.chatAsrVue.onShowing()
			})
			if (option.page) {
				this.page = option.page
				this.initPgae = option.page
				await this.getMsgHis()
			} else {
				await this.getMsgHis()
			}
			// 设置回调
			this.$websocket.setCallback((msg) => {
				// 收到消息时的回调逻辑
				if (msg.type == 'Private') {
					let obj = {
						infotype: msg.info.infotype,
						content: msg.info.content,
						fromuid: msg.fromuid,
					}
					this.msg_list.push(obj)
					utils.scrollBottom('.end')
				}
			})
			console.log("option.page: " + JSON.stringify(option.page));
			if (!option.page) {
				utils.scrollBottom('.end')
			} else {
				if (!option.id) return
				let index = this.msg_list.findIndex(item => item.id == option.id)
				if (index < 5) {
					utils.scrollBottom('.start')
				} else {
					utils.scrollBottom('.end')
				}
			}
		},
		onShow() {
			uni.$on('message', () => {
				this.page = 1
				this.msg_list = []
				this.getMsgHis()
			})
		},
		onReady() {},
		onHide() {
			innerAudioContext.pause()
		},
		onUnload() {
			innerAudioContext.pause()
		},
		onBackPress() {
			innerAudioContext.pause()
		},
		async onNavigationBarButtonTap(e) {
			const webView = this.$mp.page.$getAppWebview();
			webView.setTitleNViewButtonStyle(0, {
				width: '0'
			});
		},
		onPullDownRefresh() {
			this.page++
			this.getMsgHis()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 600)
		},
		onReachBottom(e) {
			if (this.initPgae) {
				this.page--
				this.getMsgHis()
			}
		},
		methods: {
			// 拒绝
			jujuebtn(conter) {
				this.conter = null
				uni.navigateTo({
					url: "/pages/mine/awaken/refuseReason?plan_remindorder_id=" + item.conter.id +
						"&out_trade_no=" + item.conter.out_trade_no + "&type=2" + "&fromtype=usermsg" +
						"&content_id=" + item.id + "&touid=" + item.fromuid
				})
			},
			// 同意
			tongyibtn(conter) {
				this.conter = conter
				this.$refs.showmodal.open("conter")
			},
			// 弹框——取消
			handlecancel() {
				this.conter = null
				this.$refs.showmodal.close()
			},
			// 弹框——确认
			async handleverify() {
        return false
				let res = await api.Postrevieworderdo({
					plan_remindorder_id: this.conter.id,
					out_trade_no: this.conter.out_trade_no,
					dotype: 1
				})
				if (res.code == 1) {
					// this.xiaoxinbyidgai(1)
					this.conter = null
					uni.showToast({
						icon: "none",
						title: res.msg
					})
					this.page = 1
					this.msg_list = []
					this.getMsgHis()
					this.$refs.showmodal.close()
				}
			},
			// 拒绝退款
			trueDownRefund(conter) {
				this.conter = null
				uni.navigateTo({
					url: "/pages/mine/awaken/refuseReason?plan_remindorder_id=" + item.conter.id +
						"&out_trade_no=" + item.conter.out_trade_no + "&type=4" + "&fromtype=usermsg" +
						"&content_id=" + item.id + "&touid=" + item.fromuid
				})
			},
			// 同意退款
			agreeRefund(conter) {
				this.conter = conter
				this.$refs.showmodalrefund.open("conter")
			},
			// 弹框——取消
			handlerefundcancel() {
				this.conter = null
				this.$refs.showmodalrefund.close()
			},
			// 弹框——确认
			async handlerefundverify() {
        return false
				let res = await api.Postreviewrefunddo({
					plan_remindorder_id: this.conter.id,
					out_trade_no: this.conter.out_trade_no,
					dotype: 1
				})
				if (res.code == 1) {
					// this.xiaoxinbyidgai(1)
					this.conter = null
					uni.showToast({
						icon: "none",
						title: res.msg
					})
					this.page = 1
					this.msg_list = []
					this.getMsgHis()
					this.$refs.showmodalrefund.close()
				}
			},
			priceFinsh: function(orderstatus) {
				if (['3', '4', '5', '6', '7', '8', '9'].indexOf(orderstatus) != -1) {
					return '退款金额'
				} else if (orderstatus == 1) {
					return '支付金额'
				} else {
					return '补充金额'
				}
			},
			emoji(e) {
				this.is_show_emoji = e
			},
			files(e) {
				this.is_show_file = e
			},
			async xiaoxinbyidgai(type) {
        return false
				let res = await api.Postxiaoxinbyidgai({
					content_id: this.conter.id,
					touid: this.page_url_data.fromuid,
					dotype: type
				})
			},
			// 消息列表
			async getMsgHis() {
				if (this.page < 1) return this.page = 0
				let res = await chatGetmyprivatexinxi({
					page: this.page,
					fromuid: this.page_url_data.fromuid
				})
				if (this.initPgae) {
					this.msg_list = [...this.msg_list, ...res.data]
				} else {
					this.msg_list = [...res.data, ...this.msg_list]
				}

				this.msg_list = this.msg_list.map(item => {
					if (item.infotype == 'order') {
						return {
							...item,
							content: typeof item.content == 'string' ? JSON.parse(item.content) : item.content
						}
					} else {
						return item
					}
				})
			},
			preViewImage(url) {
				utils.preViewImage([url])
			},
			handleSend(e) {
        let params={
          type: "Private",
					uid: this.userInfo.id,
					touid: this.page_url_data.fromuid,
					data: e.text,
					jinrutime: this.joinTime,
          from_group_id:0,
          to_group_id:1,
					infotype: e.type || 'txt',
        }
				this.$websocket.sendMessage(params)
				let obj = {
					infotype: e.type || 'txt',
					content: e.text,
					fromuid: this.userInfo.id,
					infoshichang:e.infoshichang
				}
				this.msg_list.push(obj)
				utils.scrollBottom('.end')
			},
			handleAudioPlay(url) {
				innerAudioContext.src = this.$imgUrl + url
				innerAudioContext.autoplay = true;
				innerAudioContext.play()
			},
			finddetail(conter) {
				if (conter.waker_worker_user_id == this.userInfo.id) {
					uni.navigateTo({
						url: "/pages/mine/awaken/orderDetail?plan_remindorder_id=" + conter.id +
							"&out_trade_no=" + conter.out_trade_no
					})
				} else {
					uni.navigateTo({
						url: "/pages/awaken/planDetail?plan_remindorder_id=" + conter.id
					})
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.wrap {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));

		.title_box {
			width: 280rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.msg_list {
			padding: 30rpx 40rpx;

			.item {
				margin-bottom: 40rpx;

				&>image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 20rpx;
				}

				.text_val {
					max-width: 470rpx;
					min-height: 80rpx;
					margin: 0 20rpx;
					padding: 20rpx;
					border-radius: 24rpx;
					background: #fff;
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
					word-wrap: break-word;
					word-break: break-all;
					white-space: pre-wrap;
				}

				.audio {
					max-width: 470rpx;
					height: 80rpx;
					background: #FFFFFF;
					border-radius: 24rpx;
					margin: 0 20rpx;
					padding: 20rpx;

					image {
						width: 36rpx;
					}

					text {
						font-weight: 400;
						font-size: 30rpx;
						color: #333333;
						margin: 0 20rpx;
					}
				}
				
				.audio-left{
					justify-content: flex-start;
				}
				
				.audio-right{
					justify-content: flex-end;
				}

				.img {
					image {
						width: 200rpx;
						height: 200rpx;
						margin: 0 20rpx;
						border-radius: 24rpx;
					}
				}

				.video {
					video {
						width: 200rpx;
						margin: 0 20rpx;
					}
				}
			}
		}


		.card-plan {
			width: 594rpx;
			height: auto;
			margin: 0 auto;
			background: linear-gradient(to right,
					#E4DBFC 0%,
					#FAD2EB 50%,
					#D4F5FC 100%);
			border-radius: 24rpx;
			overflow: hidden;
			margin-bottom: 40rpx;

			.card-plan-head {
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 30rpx;
				padding-right: 6rpx;
				background: rgba(255, 255, 255, .56);
				border-radius: 24rpx;
				font-size: 36rpx;
				color: #333333;
				font-weight: 900;

				image {
					width: 110rpx;
					height: 80rpx;
				}
			}

			.card-plan-center {
				background: rgba(255, 255, 255, .73);
				font-size: 30rpx;
				margin: 20rpx;
				width: 554rpx;
				height: auto;
				border-radius: 24rpx;
				padding: 20rpx;
			}

			.btn-item {
				width: 266rpx;
				height: 84rpx;
				line-height: 84rpx;
				border-radius: 24rpx;
				text-align: center;
			}

			.btn-l {
				background: #fff;
			}

			.btn-r {
				background: #2E56EB;
				color: #fff;
			}
		}
	}

	.openEmoji {
		padding-bottom: calc(610rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(610rpx + env(safe-area-inset-bottom));
	}

	.openFile {
		padding-bottom: calc(410rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(410rpx + env(safe-area-inset-bottom));
	}
  .jl-file{
    width: 60%;
    border: 1px solid #1C7AF7;
    margin-right: 6px;
    border-radius: 8px;
    padding: 14px 10px 10px;
    .jl-title{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      img{
        width: 20px;
        height: 20px;
        margin-right: 6px;
      }
    }
    .jl-btn{
      border: 10px;
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 14px;
      margin-top: 14px;
      border-radius: 12px;
      background: #1C7AF7;
      color: #fff;
    }
  }
</style>